<template>
<view class="login-box">
    <view class="main-box">
      <view style="display: flex;justify-content: center;">
        <image src="@/static/logo.png"  class="img" alt=""/>
      </view>
      <view class="login-com">
		   <button open-type="getUserInfo" v-if="checked" @getuserinfo="getUserInfo" class="btn">微信登录</button>
        <view type="default" v-else @click="handlerTips" class="btn">
          微信登录
        </view>
      </view>
    </view>
    <view class="bottom">
      <!-- <label class="radio">
        <radio style="transform:scale(0.7)" :checked="checked" color="#000000" />
      </label> -->
      <label class="radio" @click="handlerClickRadio">
        <uni-icons :type="checked ? 'checkbox-filled':'circle'" size="20"></uni-icons>
      </label>
      <view>
        <text @click="checked = !checked">我已阅读并同意</text>
        <text @click="gotoPage(1)" style="color:#000000">《心动实验室用户协议》</text>和
        <text @click="gotoPage(2)" style="color:#000000">《隐私保护协议》</text>
      </view>
    </view>
  </view>
  <!-- <SelfToast content="请阅读并勾选下方《品客聚精彩用户协议》和《隐私保护协议》" ref="selfToast"></SelfToast> -->
  <view class="u-center-popupRef" v-if="popupRef">
    <view class="popup-toast">
      <view class="">请阅读并勾选下方《心动实验室用户协议》和《隐私保护协议》</view>
    </view>
  </view>
  <template v-if="PLATFORM !== 'prod'">
    <view style="padding: 54rpx">
      <uni-easyinput trim="all" v-model="telNumber" placeholder="输入手机号"></uni-easyinput>
      <button @click="btnLogin" style="margin-top:40rpx" type="primary">注册品客聚精彩</button>
    </view>
  </template>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	export default {
		components: { uniIcons },
		data() {
			return {
				
				redirectUrl:'',
				checked:false,
				popupRef:false
			}
		},
		onLoad(option){
		  if (option.redirect) {
			console.log(111)
			this.redirectUrl=decodeURIComponent(option.redirect)
		  }
		},
		methods: {
			handlerTips(){
				this.popupRef = true
				this.timerLogin = setTimeout(() => {
				  this.popupRef = false
				}, 2000)
			},
			
			gotoPage(value){
			  uni.navigateTo({
			    url: value === 2 ? '/pages/user/privacy/privacy' : '/pages/user/concert/concert'
			  })
			},
			 handlerClickRadio(){
				 this.checked = !this.checked
			 },
			 login(){
				  wx.login({
				 		success: (loginRes) => {
				 		  uni.showLoading({
				 			title: '登录中...'
				 		  })
						  console.log(this.redirectUrl)
						   uni.request({
								url:getApp().globalData.url +'heartwx/user/code/'+loginRes.code,
								method: 'get',
								success: (res) => {
									if (res.data.code === 200) {
										uni.setStorageSync('userId',res.data.token);
										uni.hideLoading();
										uni.reLaunch({
										     url: this.redirectUrl
										});
									}
								}
							});
				     }
				  })
			 },
			getUserInfo(e){
			 if (e.detail.userInfo) {
			        this.userInfo = e.detail.userInfo;
			        this.hasUserInfo = true;
			        this.login();
			    } else {
				   uni.showModal({
						title: '警告',
						content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
						showCancel: false,
						confirmText: '返回授权',
						success: function(res) {
						  if (res.confirm) {
							console.log('用户点击了“返回授权”');
						  }
						}
					  });
				}
			}
	}
}
</script>

<style scoped lang="scss">
.login-box{
  padding: 64rpx 15rpx;
  height: 100vh;
  .main-box{
    .login-com{
      margin: 0 72rpx;
      .btn{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 84rpx;
        border-radius: 42rpx;
        background: #58AA46;
        color: #ffffff;
        margin-top: 90rpx;
        font-size: 32rpx;
        &:active{
          opacity: 0.8;
        }
      }
    }
  }
  .bottom{
    color: #999999;
    display: flex;
    margin: 40rpx 60rpx;
    font-size: 26rpx;
  }
}
.u-center-popupRef{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup-toast{
  width: 520rpx;
  padding: 20rpx 50rpx;
  background: rgba(0,0,0,0.8);
  border-radius: 12rpx;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
  .title{
    font-size: 30rpx;
    height: 42rpx;
    line-height: 42rpx;
    margin-bottom: 14rpx;
  }
}
</style>
